<!--
 * @Author: Dorange.Wang
 * @Date: 2021-05-31 10:43:43
 * @LastEditors: wangming
 * @LastEditTime: 2021-08-17 15:49:35
 * @Description: file content
-->
<template>
  <el-dialog :visible="showVisible" center :show-close="false" width="600px">
    <div class="b g3 f16 tl" slot="title">
      <div class="ks-row-between pl15 pr15">
        <span>{{ "复制页面" }}</span>
        <span
          class="el-icon-close g9 f26 poi"
          @click="showVisible = false"
        ></span>
      </div>
    </div>

    <el-form class="pl30 pr30" :model="formData" ref="form" label-width="120px">
      <el-form-item
        label="页面名称"
        prop="name"
        :rules="[
          { required: true, message: '页面名称不能为空', trigger: 'change' },
        ]"
      >
        <el-input
          v-model="formData.name"
          style="width: 400px"
          placeholder="请输入页面名称"
          :maxlength="64"
          show-word-limit
        ></el-input>
      </el-form-item>
      <el-form-item
        label="关联模型"
        prop="modelId"
        :rules="[
          { required: true, message: '请选择关联模型', trigger: 'change' },
        ]"
      >
        <tree-select
          style="width: 400px"
          v-model="formData.modelId"
          filterable
          :fieldMap="{
            value: 'id',
            label: 'name',
            disabled: 'disabled',
          }"
          :filterNodeMethod="filterNodeMethod"
          :treeData="modelList"
        />
      </el-form-item>
      <el-form-item label="表单描述">
        <el-input
          type="textarea"
          v-model="formData.description"
          style="width: 400px"
          placeholder="请输入表单描述"
          :maxlength="200"
          show-word-limit
        ></el-input>
      </el-form-item>
    </el-form>

    <div slot="footer" class="tr">
      <el-button @click="showVisible = false">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getHmmodelfolderListTree } from '@/apis/paas/HmModelFolderController.js'
import { filterNodeMethod } from "@/utils/treeSelectFormat";
import { cloneDeep } from "lodash";
export default {
  name: "CopyForm",
  data() {
    return {
      modelList: [],
      filterNodeMethod,
      showVisible: false,
      formData: {},
      loading: false,
      callback: () => {},
    };
  },
  methods: {
    createModelTreeNode(tree) {
      return cloneDeep(tree).map((node) => {
        node.disabled = node.type === "folder";
        if (node.modelResults) {
          node.id = "folder" + node.id;
          node.children = node.modelResults || [];
          node.children.forEach((item) => {
            item._id = item.id;
            item.name = `${item.name}(${item.code})`;
          });
        }
        return node;
      });
    },
    loadModelList() {
      getHmmodelfolderListTree().then((res) => {
        res.forEach((node) => {
          node.type = "folder";
        });
        this.modelList = this.createModelTreeNode(res);
      });
    },
    open(record = {}, callback = () => {}) {
      this.loadModelList();
      this.showVisible = true;
      this.formData = {
        ...record,
        name: (record.name + "_copy").substr(0, 64),
        description: record.description
          ? (record.description + "_copy").substr(0, 64)
          : "",
      };
      this.callback = callback;
      this.$nextTick(() => {
        this.$refs.form.clearValidate();
      });
    },

    close() {
      this.showVisible = false;
    },

    async submit() {
      try {
        await this.$refs.form.validate();
        const { name, description, modelId } = this.formData;
        const params = {
          name,
          description,
          modelId,
        };
        for (const key in params) {
          params[key] =
            typeof params[key] === "string" ? params[key].trim() : params[key];
        }
        this.callback(params);
      } catch (error) {
        console.log(error);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
